<!DOCTYPE html>
<html class="overflow-hidden">
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="apple-mobile-web-app-capable" content="no"/>
    <meta name="wap-font-scale" content="no">
    <meta content="telephone=no" name="format-detection">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>礼仪之邦-选择银行</title>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <link rel="stylesheet" href="css/swiper.min.css"/>
    <link rel="stylesheet" href="css/public.css"/>
    <link rel="stylesheet" href="css/app.css"/>
</head>
<body class="overflow-hidden">
<div class="register-bar collect-bar setting-bar">
    <h2 class="header-box pos-abs-tl animated animated-top active hank-header">
        <a class="go-back-btn sprite-icon" id="forgetGoBack" href="#"></a>
        选择银行
    </h2>

    <div class="collect-cont hank-cont" style="background: #f5f5f5;">
        <div class="search-hank-bar">
            <label id="searchBar">
                <span class="search-animate animated">
                    <i class="sprite-icon search-hank"></i>
                    <input id="searchInput" type="text" placeholder="搜索">
                    <i class="clear-btn pos-abs-tr"></i>
                </span>
            </label>
            <a class="close-link animated" href="javascript:;">取消</a>
        </div>
        <div class="hank-list">
            <div id="wrapper">
                <div id="scroller">
                    <div class="hank-list-row">
                        <h2>A</h2>
                        <a href="javascript:;">安徽省农村信用社</a>
                        <a href="javascript:;">鞍山银行</a>
                    </div>
                    <div class="hank-list-row">
                        <h2>B</h2>
                        <a href="javascript:;">安徽省农村信用社</a>
                        <a href="javascript:;">鞍山银行</a>
                    </div>
                    <div class="hank-list-row">
                        <h2>C</h2>
                        <a href="javascript:;">安徽省农村信用社</a>
                        <a href="javascript:;">鞍山银行</a>
                    </div>
                    <div class="hank-list-row">
                        <h2>D</h2>
                        <a href="javascript:;">安徽省农村信用社</a>
                        <a href="javascript:;">鞍山银行</a>
                    </div>
                    <div class="hank-list-row">
                        <h2>E</h2>
                        <a href="javascript:;">安徽省农村信用社</a>
                        <a href="javascript:;">鞍山银行</a>
                    </div>
                    <div class="hank-list-row">
                        <h2>F</h2>
                        <a href="javascript:;">安徽省农村信用社</a>
                        <a href="javascript:;">鞍山银行</a>
                    </div>
                    <div class="hank-list-row">
                        <h2>G</h2>
                        <a href="javascript:;">安徽省农村信用社</a>
                        <a href="javascript:;">鞍山银行</a>
                    </div>
                    <div class="hank-list-row">
                        <h2>H</h2>
                        <a href="javascript:;">安徽省农村信用社</a>
                        <a href="javascript:;">鞍山银行</a>
                    </div>
                    <div class="hank-list-row">
                        <h2>I</h2>
                        <a href="javascript:;">安徽省农村信用社</a>
                        <a href="javascript:;">鞍山银行</a>
                    </div>
                    <div class="hank-list-row">
                        <h2>J</h2>
                        <a href="javascript:;">安徽省农村信用社</a>
                        <a href="javascript:;">鞍山银行</a>
                    </div>
                    <div class="hank-list-row">
                        <h2>K</h2>
                        <a href="javascript:;">安徽省农村信用社</a>
                        <a href="javascript:;">鞍山银行</a>
                    </div>
                    <div class="hank-list-row">
                        <h2>L</h2>
                        <a href="javascript:;">安徽省农村信用社</a>
                        <a href="javascript:;">鞍山银行</a>
                    </div>
                    <div class="hank-list-row">
                        <h2>M</h2>
                        <a href="javascript:;">安徽省农村信用社</a>
                        <a href="javascript:;">鞍山银行</a>
                    </div>
                    <div class="hank-list-row">
                        <h2>N</h2>
                        <a href="javascript:;">安徽省农村信用社</a>
                        <a href="javascript:;">鞍山银行</a>
                    </div>
                    <div class="hank-list-row">
                        <h2>O</h2>
                        <a href="javascript:;">安徽省农村信用社</a>
                        <a href="javascript:;">鞍山银行</a>
                    </div>
                    <div class="hank-list-row">
                        <h2>P</h2>
                        <a href="javascript:;">安徽省农村信用社</a>
                        <a href="javascript:;">鞍山银行</a>
                    </div>
                    <div class="hank-list-row">
                        <h2>Q</h2>
                        <a href="javascript:;">安徽省农村信用社</a>
                        <a href="javascript:;">鞍山银行</a>
                    </div>
                    <div class="hank-list-row">
                        <h2>R</h2>
                        <a href="javascript:;">安徽省农村信用社</a>
                        <a href="javascript:;">鞍山银行</a>
                    </div>
                    <div class="hank-list-row">
                        <h2>S</h2>
                        <a href="javascript:;">安徽省农村信用社</a>
                        <a href="javascript:;">鞍山银行</a>
                    </div>
                    <div class="hank-list-row">
                        <h2>T</h2>
                        <a href="javascript:;">安徽省农村信用社</a>
                        <a href="javascript:;">鞍山银行</a>
                    </div>
                    <div class="hank-list-row">
                        <h2>U</h2>
                        <a href="javascript:;">安徽省农村信用社</a>
                        <a href="javascript:;">鞍山银行</a>
                    </div>
                    <div class="hank-list-row">
                        <h2>V</h2>
                        <a href="javascript:;">安徽省农村信用社</a>
                        <a href="javascript:;">鞍山银行</a>
                    </div>
                    <div class="hank-list-row">
                        <h2>W</h2>
                        <a href="javascript:;">安徽省农村信用社</a>
                        <a href="javascript:;">鞍山银行</a>
                    </div>
                    <div class="hank-list-row">
                        <h2>X</h2>
                        <a href="javascript:;">安徽省农村信用社</a>
                        <a href="javascript:;">鞍山银行</a>
                    </div>
                    <div class="hank-list-row">
                        <h2>Y</h2>
                        <a href="javascript:;">安徽省农村信用社</a>
                        <a href="javascript:;">鞍山银行</a>
                    </div>
                    <div class="hank-list-row">
                        <h2>Z</h2>
                        <a href="javascript:;">安徽省农村信用社</a>
                        <a href="javascript:;">鞍山银行</a>
                    </div>
                </div>
            </div>

            <div id="hankTips" class="hank-tips"><span>A</span></div>
            <div class="hank-menu">
                <span>A</span>
                <span>B</span>
                <span>C</span>
                <span>D</span>
                <span>E</span>
                <span>F</span>
                <span>G</span>
                <span>H</span>
                <span>I</span>
                <span>J</span>
                <span>K</span>
                <span>L</span>
                <span>M</span>
                <span>N</span>
                <span>O</span>
                <span>P</span>
                <span>Q</span>
                <span>R</span>
                <span>S</span>
                <span>T</span>
                <span>U</span>
                <span>V</span>
                <span>W</span>
                <span>X</span>
                <span>Y</span>
                <span>Z</span>
            </div>
        </div>
    </div>
</div>

<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/swiper.jquery.min.js"></script>
<script src="js/iscroll-probe.js"></script>
<script src="js/box.js"></script>
<script src="js/public.js"></script>
<script src="js/area.js"></script>
<script>
    $(function () {
        var myScroll = new IScroll("#wrapper", {
            probeType: 3,
            click: true,
            tap: true,
            mouseWheel: true,
            scrollbars: true,
            interactiveScrollbars: true,
            shrinkScrollbars: 'scale'
        });

        var $tips = $("#hankTips"), $list = $(".hank-list-row");
        $tips.show();
        var topAry = [];
        for (var i = 0; i < 26; i++) {
            topAry.push($list.eq(i).offset().top - 91);
        }
        myScroll.on('scroll', scrollFun);

        function scrollFun() {
            if (this.y < 0 && Math.abs(this.y) >= 10) {
                //$tips.show();
                for (var i = 0; i < topAry.length; i++) {
                    if (Math.abs(this.y) >= topAry[i]) {
                        $tips.find("span").text($list.eq(i).find("h2").text());
                    }
                }
            } else {
                //$tips.hide();
            }
        }

        //楼层字母
        $(".hank-menu").find("span").click(function () {
            var _i = $(this).index();
            if (_i == 0) {
                //$tips.hide();
                myScroll.scrollTo(0, -(topAry[_i]), 600);
            } else {
                if (Math.abs(myScroll.maxScrollY) > (topAry[_i])) {
                    myScroll.scrollTo(0, -(topAry[_i] + 2), 300);
                } else {
                    myScroll.scrollTo(0, -(Math.abs(myScroll.maxScrollY)), 300);
                }
            }
        });

        //搜索
        $("#searchBar").click(function () {
            var _this = this;
            /*$("#searchDisk").fadeIn();
            $(".hank-cont").css({"paddingTop": "37px"});*/
            $(".header-box").removeClass("active");
            $(_this).parents(".search-hank-bar").find(".close-link").addClass("active");
            $(_this).parents(".search-hank-bar").animate({"paddingRight": "46px"}, 300);
            $(_this).find("span").animate({"left": "27px"}, 300, function () {
                $(this).find("input").focus().show();
            });
            //$("#hankTips").hide();
            $(".setting-bar").animate({"paddingTop": "0px"}, 300, function () {
                /*myScroll.scrollTo(0, 0, 1);
                $("#hankTips").css("top", "47px").show();*/
                myScroll.refresh();
            });
        });

        //取消搜索
        $(".close-link").click(function () {
            var _tag = "#searchBar";
            /*$("#searchDisk").fadeOut();
            $(".hank-cont").css({"paddingTop": "47px"});*/
            $(".header-box").addClass("active");
            $(_tag).parents(".search-hank-bar").find(".close-link").removeClass("active");
            $(_tag).parents(".search-hank-bar").animate({"paddingRight": "10px"}, 300);
            //$("#hankTips").hide();
            $(".setting-bar").animate({"paddingTop": "44px"}, 300, function () {
                /*myScroll.scrollTo(0, 0, 1);
                $("#hankTips").css("top", "91px").show();*/
                myScroll.refresh();
            });

            $(_tag).find("input").blur().val("");
            $(_tag).find("span").animate({"left": "50%"}, 300);
        });

        //输入文字
        //搜索匹配
        $("#searchInput").keyup(function () {
            var _val = $(this).val();
            //找到匹配到的文字
            //搜索方法之后执行刷新
            myScroll.refresh();
        });

        //清空输入
        $(".clear-btn").click(function () {
            $(this).prevAll("input[type='text']").val("");
        });
    });
</script>
</body>
</html>